<template>
  <el-container style="margin: 10px">
    <el-header>
      <el-select v-model="jobIdList" multiple placeholder="任务选择" class="filter-item">
        <el-option v-for="item in jobList" :key="item.id" :label="item.jobDesc" :value="item.id" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
        搜索
      </el-button>
    </el-header>
    <el-main>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="jobDesc"
          label="任务名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="readerTable"
          label="源表"
          align="center">
        </el-table-column>
        <el-table-column
          prop="readerCount"
          label="源表数据量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="writerTable"
          label="目标表"
          align="center">
        </el-table-column>
        <el-table-column
          prop="writerCount"
          label="目标表数据量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="dValue"
          label="差值"
          align="center">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import * as job from '@/api/datax-job-info'
import { getJobSyncInfoByJob } from '@/api/datax-databaseManage'

export default {
  name: "jobSyncInfo",
  data() {
    return {
      param: [],
      jobList: [],
      jobIdList: [],
      tableData: [],
      loading: false,
      jobInfo: undefined,
      listQuery: {
        current: 1,
        size: 1000,
        jobGroup: 0,
        projectIds: '',
        triggerStatus: -1,
        jobDesc: '',
        glueType: ''
      },
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      job.getList(this.listQuery).then(response => {
        const { content } = response
        this.jobList = content.data
      })
    },
    search() {
      this.param = []
      this.tableData = []
      for (let i = 0; i < this.jobIdList.length; i++) {
        this.jobList.find((job) => {
          if (job.id === this.jobIdList[i]) {
            this.param.push(job)
          }
        })
      }
      this.loading = true
      getJobSyncInfoByJob(this.param).then((response) => {
        console.log(response)
        this.loading = false
        this.tableData = response
      }).catch((error)=> {
        this.loading = false
        this.$message.error(error)
      })
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
